<template>
  <div>
    <el-input v-model="prefix"> </el-input>
    <inner ref="son" :label="prefix" :channel="lock">
      <!--      <template  slot-scope="scope">-->
      <template #default="scope">
        <div style="color: rgba(21, 28, 216, 0.54)">{{ scope.hobbies[0] }}</div>
        <div style="color: rgba(88, 28, 216, 0.54)">{{ scope.hobbies[1] }}</div>
        <div style="color: rgba(188, 28, 216, 0.54)">
          {{ scope.hobbies[2] }}
        </div>
      </template>
      <span slot="afterGroup" style="background-color: rgba(216, 137, 26, 0.54)"
        >:后缀</span
      >

      <!--            <el-button slot="preGroup" slot-scope="that"-->
      <template #preGroup="that">
        <el-button @click="alter(that.hobbies)">前缀：</el-button>
      </template>
    </inner>
    <el-button @click="() => $refs.son.show()"> show1 inner show</el-button>
    <el-button @click="lock = lock + 1"> show2 inner show</el-button>
    <router-link to="/september">标签方式跳转页面</router-link>
    <el-button @click="() => $router.push('/september')"
      >代码方式跳转页面</el-button
    >
    <div>
      <el-button @click="shift1">按照path跳转页面带参数</el-button>
      <el-button @click="shift2">按照name跳转页面带参数</el-button>
    </div>
  </div>
</template>

<script>
// import New from './components/New.vue';
import Inner from "@/components/Inner";
export default {
  name: "FatherSon",
  components: {
    Inner,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      prefix: "hobbies",
      lock: 0,
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    alter(c) {
      this.$message.info(c);
      this.sampleM();
    },
    shift1() {
      this.$router.push({
        ///october?username=zhangsan&age=19
        path: "/october",
        query: {
          username: "zhangsan",
          age: 18,
        },
      });
    },
    shift2() {
      this.$router.push({
        name: "October",
        params:{
          username: "wangwu",
          age: 15,
        }
      });
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.inner {
  width: 500px;
}
</style>
